<template>
  <div id="app">
    <!-- 顶部搜索 -->
    <div class="top">
      <el-row>
        <el-col :xs="{ span: 22, offset: 1 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 16, offset: 2 }" :lg="{ span: 16, offset: 2 }">
          <div class="search-box">
            <input type="text" v-model="keyword" placeholder="请输入想搜索的内容" @keyup="getSimilarList" @keyup.enter="search()" />
            <div class="search-btn" @click="search()">
              <i class="el-icon-search"></i>
              百度一下
            </div>
            <div class="search_list">
              <div class="search_word" v-for="(item, index) in similarList" :key="index" @click="search(item.q)">{{ item.q }}</div>
            </div>
          </div>
        </el-col>
        <el-col class="hidden-sm-and-down" :md="6" :lg="6">
          <div class="top-tool">
            <a href="javascript:;" :plain="true" @click="addFavorite()">
              <i class="el-icon-star-on"></i>
              收藏导航
            </a>
            <a class="hidden-md-and-down" style="cursor: pointer" @click="videoDialog = true">
              <i class="el-icon-video-camera"></i>
              视频解析
            </a>
            <a href="https://fanyi.baidu.com/" target="_blank">
              <i class="el-icon-collection"></i>
              翻译工具
            </a>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 主体部分 -->
    <el-row type="flex" justify="space-around">
      <!-- 侧边楼层导航 -->
      <el-col class="hidden-sm-and-down" :sm="1" :md="2">
        <div class="sidebar">
          <div class="nav" v-for="(item, index) in siteList" :key="item.ftitle" @click="setFloorNavMountClick(index)">{{ item.ftitle }}</div>
        </div>
      </el-col>
      <!-- 站点主体部分 -->
      <el-col :xs="22" :sm="22" :md="20">
        <siteList :siteList="siteList"></siteList>
      </el-col>
      <!-- 联系我 -->
      <el-col class="hidden-md-and-down" :md="1">
        <div class="contact">
          <transition name="el-fade-in-linear">
            <div class="item" id="to-top" v-show="showBackTop" @click="toTop()">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huojian" />
              </svg>
            </div>
          </transition>
          <div class="contact-item">
            <div class="item" id="qq" @click="goToQQ()" @mouseover="icon.qq = '#icon-qq-color'" @mouseout="icon.qq = '#icon-qq'">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="icon.qq" />
              </svg>
            </div>
            <div
              id="weixin"
              class="item weixin-btn"
              @mouseover="
                showWeixin = true
                icon.weixin = '#icon-weixin-color'
              "
              @mouseout="
                showWeixin = false
                icon.weixin = '#icon-weixin'
              "
            >
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="icon.weixin" />
              </svg>
              <div>
                <transition name="el-zoom-in-center">
                  <img src="https://qiniuyun.zhichi921.com/weixin.jpg" alt v-show="showWeixin" />
                </transition>
              </div>
            </div>
            <div class="item" id="fankui" @click="dialogFormVisible = true">反馈</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 综合 -->
    <el-row class="complex">
      <el-col :xs="{ span: 16, offset: 4 }" :sm="{ span: 10, offset: 2 }" :md="{ span: 5, offset: 2 }" :lg="5">
        <h2>程序员神器</h2>
        <div class="tools">
          <a v-for="(item, index) in toolList" :key="index" :title="item.title" :href="item.url" target="_blank">
            <span>{{ item.desc }}</span>
            <i :class="item.icon"></i>
          </a>
        </div>
      </el-col>
      <el-col :xs="{ span: 16, offset: 4 }" :sm="10" :md="{ span: 5, offset: 0 }" :lg="5">
        <h2>前沿资讯</h2>
        <div class="article-list">
          <div v-for="(item, index) in articleList" :key="item._id">
            <span>{{ index + 1 }}</span>
            <a :href="'https://juejin.im/post/' + item.article_id" target="_blank">{{ item.article_info.title }}</a>
          </div>
        </div>
      </el-col>
      <el-col :xs="{ span: 16, offset: 4 }" :sm="{ span: 10, offset: 2 }" :md="{ span: 5, offset: 0 }" :lg="5">
        <h2>联系站长</h2>
        <div class="wechat">
          <img src="./assets/weixin_code.jpg" alt />
          <p>
            扫描微信号：
            <span>vaevie520</span>
          </p>
        </div>
      </el-col>
      <el-col :xs="{ span: 16, offset: 4 }" :sm="10" :md="{ span: 5, offset: 0 }" :lg="5">
        <h2>已收录人气酷站</h2>
        <div class="count">
          <strong>
            {{ sitetotalnum }}
            <span>个</span>
          </strong>
          <div class="update-time">
            <i class="el-icon-time"></i>
            导航更新日期：{{ updateTime.year }}-{{ updateTime.month }}-{{ updateTime.day }}
          </div>
          <div class="recommend">
            还有更赞的
            <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true">我来推荐</el-button>
          </div>
          <div class="auther">
            <p>
              Design:
              <a id="lofter" href="https://vaevie.lofter.com/" target="_blank">@vaevie520 LOFTER</a>
            </p>
            <p>
              Coding:
              <a id="mayun" href="https://gitee.com/vaevie520/" target="_blank">@vaevie520 码云</a>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 底部版权 -->
    <div class="footer">
      <p>本网站设计及数据均受版权保护，任何公司及个人不得以任何方式复制，特此声明。</p>
      <p>
        <span>友情链接</span>
        <span>广告合作</span>
        <span>联系我们</span>
        <span>关于我们</span>
      </p>
      <div class="copyright">
        <span>Copyright © 2020 小U(XIAOU) -</span>
        <a href="http://www.beian.miit.gov.cn/" target="_blank">豫ICP备18003915号-1</a>
        <img src="./assets/beian.png" alt />
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41019702002723" target="_blank">豫公网安备 41019702002723号</a>
      </div>
    </div>
    <!-- 看板娘组件 -->
    <Cute></Cute>

    <!-- 反馈弹窗 -->
    <el-dialog title="意见反馈" :visible.sync="dialogFormVisible">
      <el-form :model="feedbackForm" :rules="rules" ref="feedbackFormRef">
        <el-form-item prop="content">
          <el-input id="textarea" type="textarea" :rows="4" placeholder="请输入内容" v-model="feedbackForm.content"></el-input>
        </el-form-item>
        <div class="rate">评分</div>
        <el-rate id="rata" v-model="feedbackForm.rate" show-text></el-rate>
        <el-form-item class="form-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="feedback" size="mini">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 视频解析弹窗 -->
    <el-dialog title="视频解析" :visible.sync="videoDialog">
      <el-form :model="videoForm" :rules="videoRules" ref="feedbackFormRef">
        <el-form-item prop="link">
          <el-input id="textarea" type="textarea" :rows="4" placeholder="请输入需要解析的视频链接" v-model="videoForm.link"></el-input>
        </el-form-item>
        <el-form-item class="form-footer">
          <el-button size="medium" @click="videoForm.link = ''">清除内容</el-button>
          <el-button size="medium" @click="videoDialog = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="parsingVideo">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SiteList from '@/components/SiteList'
import Cute from '@/components/Cute'
import { getSiteList, getRecommendArticle, getToolList, searchSuggest, sendFeedback } from '@/api'
export default {
  name: 'app',
  data() {
    return {
      keyword: '',
      siteList: [],
      toolList: [],
      articleList: [],
      similarList: [],
      sitetotalnum: '',
      element: {
        nav_item: null,
        floor_item: null,
      },
      showBackTop: false,
      showWeixin: false,
      dialogFormVisible: false,
      feedbackForm: {
        content: '',
        rate: 5,
      },
      rules: {
        content: [{ required: true, message: '请填写反馈内容', trigger: 'blur' }],
      },
      videoForm: {
        link: '',
      },
      videoRules: {
        link: [{ required: true, message: '请输入要解析的视频链接', trigger: 'blur' }],
      },
      timer: null,
      icon: {
        qq: '#icon-qq',
        weixin: '#icon-weixin',
      },
      updateTime: {
        year: '',
        month: '',
        day: '',
      },
      loading: null,
      searchTimer: null,
      qq: '1843544121',
      videoDialog: false,
    }
  },
  components: {
    SiteList,
    Cute,
  },
  created() {
    this.loading = this.$loading({ fullscreen: true })
    this.getSiteList()
    this.getRecommendArticle()
    this.getToolList()
    this.getNow()
  },
  methods: {
    async getSiteList() {
      const res = await getSiteList()
      // console.log(res)
      this.siteList = res.data
      // 获取站点总数量
      let total = 0
      res.data.forEach((item, index) => {
        total += item.list.length
      })
      // 总数量再加21
      this.sitetotalnum = total + 21
    },
    // 获取推荐文章
    async getRecommendArticle() {
      const res = await getRecommendArticle()
      // console.log(res)
      this.articleList = res.data
    },
    async getToolList() {
      const res = await getToolList()
      this.toolList = res.data
    },
    // 获取当前时间
    getNow() {
      const date = new Date()
      this.updateTime.year = date.getFullYear().toString()
      this.updateTime.month = (date.getMonth() + 1).toString().padStart(2, '0')
      this.updateTime.day = (date.getDate() - 1).toString().padStart(2, '0')
    },
    search() {
      window.open('https://www.baidu.com/s?wd=' + this.keyword, '_blank')
    },
    parsingVideo() {
      window.open('https://vip.116kan.com/?url=' + this.videoForm.link, '_blank')
    },
    getSimilarList() {
      if (!this.keyword) {
        this.similarList = []
        return
      }
      // 搜索防抖
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(async () => {
        const res = await searchSuggest(this.keyword)
        this.similarList = res.data
      }, 200)
    },
    goToQQ() {
      window.open('http://wpa.qq.com/msgrd?v=3&uin=' + this.qq + '&site=qq&menu=yes', '_blank')
    },
    feedback() {
      this.$refs.feedbackFormRef.validate(async valid => {
        if (!valid) return false
        // 发送邮件请求
        let data = {
          content: this.feedbackForm.content,
          rata: this.feedbackForm.rate,
        }
        const res = await sendFeedback(data)
        // console.log(res)
        if (res.code == 1) {
          this.$message.success(res.msg)
          this.feedbackForm = this.$options.data().feedbackForm
          this.dialogFormVisible = false
        }
      })
    },
    // 收藏网站
    addFavorite() {
      this.$message.warning('请使用Ctrl+D添加至浏览器收藏夹')
    },
    /**
     * 监听窗口滚动楼层导航动态定位
     */
    floorSrcollEventListener() {
      const { nav_item, floor_item } = this.element
      const window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      for (let i = 0, len = floor_item.length; i < len; i++) {
        let floor_offsetTop = floor_item[i].offsetTop - floor_item[0].offsetTop
        if (window_scrollTop >= floor_offsetTop) {
          for (let n = 0, len = nav_item.length; n < len; n++) {
            const current_classList = nav_item[n].classList
            i === n ? current_classList.add('active') : current_classList.remove('active')
          }
        }
      }
    },
    /**
     * 设置楼层导航事件驱动方法
     * @param {Number} index  楼层下标
     */
    setFloorNavMountClick(index) {
      const { floor_item } = this.element
      const floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop + 96,
        window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        timer = {
          step: 60,
          times: 16,
          FLOOR_OFFSETTOP: floor_offsetTop,
        }
      if (window_scrollTop > floor_offsetTop) {
        this.setFloorScrollArrowUp(timer)
      } else if (window_scrollTop == floor_offsetTop) {
        return false
      } else {
        this.setFloorScrollArrowDown(timer)
      }
    },
    /**
     * 设置楼层向上滚动
     * @param {Object} timer 定时器配置
     */
    setFloorScrollArrowUp(timer) {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (window_scrollTop <= timer.FLOOR_OFFSETTOP) {
          document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
          document.body.scrollTop = timer.FLOOR_OFFSETTOP
          clearInterval(this.timer)
        } else {
          document.documentElement.scrollTop = window_scrollTop - timer.step
          document.body.scrollTop = window_scrollTop - timer.step
        }
      }, timer.times)
    },
    /**
     * 设置楼层向下滚动
     * @param {Object} timer 定时器配置
     */
    setFloorScrollArrowDown(timer) {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        let window_scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (window_scrollTop >= timer.FLOOR_OFFSETTOP) {
          document.documentElement.scrollTop = timer.FLOOR_OFFSETTOP
          document.body.scrollTop = timer.FLOOR_OFFSETTOP
          clearInterval(this.timer)
        } else {
          document.documentElement.scrollTop = window_scrollTop + timer.step
          document.body.scrollTop = window_scrollTop - timer.step
        }
      }, timer.times)
    },
    // 显示返回顶部按钮
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop >= 120) {
        this.showBackTop = true
      } else if (scrollTop < 120) {
        this.showBackTop = false
      }
    },
    // 返回顶部
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 80
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
  },
  mounted() {
    // 获取楼层及导航元素
    setTimeout(() => {
      this.element = {
        nav_item: document.getElementsByClassName('nav'),
        floor_item: document.getElementsByClassName('floor-item'),
      }
      this.element.nav_item[0].classList.add('active')
      window.addEventListener('scroll', this.floorSrcollEventListener)
    }, 200)
    // 添加监听屏幕滚动事件
    window.addEventListener('scroll', this.handleScroll)
    // 添加百度统计
    let _hmt = _hmt || []
    ;(function() {
      let hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?2c7e795a8d8c2015f0fb588d80cb73c4'
      let s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
    this.loading.close()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.floorSrcollEventListener)
  },
}
</script>

<style scoped lang="scss">
.top {
  height: 96px;
  background: #3295d9;
  padding: 25px 0;
  .search-box {
    position: relative;
    height: 42px;
    input {
      box-sizing: border-box;
      width: 100%;
      border: none;
      font-size: 15px;
      line-height: 20px;
      height: 42px;
      padding: 11px 100px 11px 26px;
      border-radius: 3px;
      color: #9f9f9f;
      outline: none;
    }
    .search-btn {
      height: 42px;
      box-sizing: border-box;
      width: 100px;
      margin-left: -5px;
      cursor: pointer;
      text-align: center;
      background-color: #69bdfb;
      color: #fff;
      font-size: 15px;
      line-height: 42px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      position: absolute;
      right: 0;
      top: 0;
      &:hover {
        background-color: #51b1f5;
      }
    }
    .search_list {
      position: absolute;
      width: 100%;
      font-size: 14px;
      background-color: #fff;
      z-index: 1;
      border-radius: 4px;
      box-shadow: 0px -1px #f3f3f3;
      & > div {
        padding-left: 26px;
        height: 36px;
        line-height: 36px;
        color: #666;
        &:hover {
          cursor: pointer;
          background-color: #f3f3f3;
          border-radius: 4px;
        }
      }
    }
  }
}
.top-tool {
  margin-left: 10px;
  a {
    color: #dff2ff;
    text-decoration: none;
    font-size: 13px;
    line-height: 42px;
    margin: 0 6px;
    &:hover {
      color: #ffffff;
    }
  }
}
.sidebar {
  position: sticky;
  top: 32px;
  left: 1.5%;
  margin-top: 32px;
  height: 480px;
  border-radius: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  padding: 10px 0;
  color: #444;
  .nav {
    cursor: pointer;
    font-size: 15px;
  }
}
.active {
  color: #ff5a00;
}
.contact {
  position: sticky;
  top: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 192px;
  .item {
    width: 46px;
    height: 40px;
    background-color: #e1e9ee;
    margin-top: 8px;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    border-radius: 4px;
    transition: 0.3s;
    cursor: pointer;
    &:hover {
      color: #ffa617;
    }
    .icon {
      font-size: 20px;
    }
  }
  .contact-item {
    position: absolute;
    bottom: 0;
  }
  #fankui {
    background-color: #99aebc;
    &:hover {
      color: #222222;
    }
  }
  #to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      width: 24px;
      height: 24px;
    }
  }
}
.weixin-btn {
  position: relative;
  & > div {
    position: absolute;
    left: -190px;
    top: -150px;
    img {
      width: 160px;
      height: 284px;
      border-radius: 10px;
    }
  }
}
.rate {
  margin: 30px 0 10px;
}
.form-footer {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
.complex {
  // padding:0 6.4% 0 10%;
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #ffffff;
  h2 {
    text-align: center;
    color: #1c95dc;
    font-size: 20px;
    margin: 56px auto 38px;
  }
  .tools {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    a {
      display: block;
      width: 30%;
      // width: 100px;
      height: 100px;
      line-height: 100px;
      margin-top: 10px;
      text-align: center;
      font-size: 36px;
      border-radius: 4px;
      background-color: #f3f8fb;
      color: #1c95dc;
      &:hover {
        background-color: #529cdb;
        color: #fff;
      }
      span {
        display: none;
      }
    }

    & > a:nth-child(-n + 3) {
      margin-top: 0;
    }
  }
  .article-list {
    padding: 0 6%;
    div {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      &:hover {
        a {
          color: #1c95dc;
          cursor: pointer;
        }
        span {
          background-color: #1c95dc;
        }
      }
    }
    a {
      color: #a0a0a0;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    span {
      display: inline-block;
      height: 16px;
      width: 16px;
      text-align: center;
      line-height: 16px;
      border-radius: 16px;
      font-size: 12px;
      color: #ffffff;
      background-color: #a0a0a0;
      margin-right: 4px;
      cursor: pointer;
    }
    div:nth-child(-n + 3) {
      span {
        background-color: #1c95dc;
      }
    }
  }
  .wechat {
    text-align: center;
    img {
      width: 192px;
      border-radius: 6px;
      box-shadow: 0 0 18px rgba(50, 149, 217, 0.2);
      border: 1px solid #e2eef7;
      margin-bottom: 36px;
    }
    p {
      color: #a1a1a1;
      font-size: 13px;
      span {
        color: #1c95dc;
      }
    }
  }
  .count {
    color: #1c95dc;
    margin-top: 10px;
    text-align: center;
    strong {
      font-size: 66px;
      font-family: 'BebasNeue';
      letter-spacing: 4px;
      // font-weight: 900;
      span {
        font-size: 14px;
      }
    }
    .update-time {
      i {
        margin-right: 2px;
      }
      color: #a1a1a1;
      font-size: 14px;
      margin-bottom: 70px;
    }
    .recommend {
      color: #1c95dc;
      font-size: 14px;
      margin-bottom: 32px;
      button {
        padding: 10px 12px;
        margin-left: 6px;
      }
    }
    .auther {
      padding-left: 16%;
      text-align: left;
      font-size: 14px;
      p {
        margin-bottom: 4px;
        a {
          color: #c7c7c7;
          &:hover {
            color: #1c95dc;
          }
        }
      }
    }
  }
}
.footer {
  background-color: #3295d9;
  text-align: center;
  padding: 28px 0 20px;
  font-size: 12px;
  line-height: 18px;
  color: #dff2ff;
  width: 100%;
  .copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    a {
      margin: 0 4px;
      color: #dff2ff;
      // line-height: 24px;
    }
  }
  p {
    margin-bottom: 8px;
    span {
      margin: 0 6px;
      cursor: pointer;
    }
  }
}
::v-deep .el-textarea__inner {
  font-family: 'Pingfang-Medium';
}
</style>
